<!--使用人弹窗-->
<template>
    <Modal :value="value" @input="handleInput" width="746" class="col-2" :closable="false">
        <div slot="header">
            使用人
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form ref="userForm" class="clearfix" :model="userForm" :label-width="130" inline>
            <FormItem label="使用单位联系人" class="class=&quot;search-btn-box">
                <Input
                    :disabled="editORshow"
                    class="medium-input"
                    v-model="userForm.useOrgPersonCode"
                    type="text"
                    placeholder="使用单位联系人"
                >
                </Input>
            </FormItem>
            <FormItem label="使用单位联系电话" class="class=&quot;search-btn-box">
                <Input
                    :disabled="editORshow"
                    class="medium-input"
                    v-model="userForm.useOrgPersonTel"
                    type="text"
                    placeholder="使用单位联系电话"
                >
                </Input>
            </FormItem>
        </Form>
        <Button :disabled="editORshow" class="icon-btn" type="primary" @click="addUser">新增</Button>
        <Button
            :disabled="editORshow"
            style="margin-left: 14px;"
            class="icon-btn"
            type="primary"
            @click="saveUser"
        >保存
        </Button>
        <Button
            :disabled="editORshow"
            style="margin-left: 14px;"
            class="icon-btn"
            type="primary"
            @click="delUser"
        >删除
        </Button>
        <div class="table-Modal">
            <Table @on-selection-change="userSelect" :columns="customsDecUserColumn" :data="customsDecUserList"></Table>
        </div>
        <div slot="footer" :class="[editORshow ? 'hide' : 'show']">
            <Button style="display:none;" type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="saveUsePeop">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'UsePeopModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        usePeopModal: {
            default: function () {
                return {
                    CustomsDecUserList: [],
                    editORshow: false
                }
            },
            type: Object
        }
    },
    data () {
        return {
            editORshow: '',
            userForm: {
                useOrgPersonCode: '',
                useOrgPersonTel: ''
            },
            customsDecUserColumn: [ // 使用人表格
                {
                    type: 'selection',
                    align: 'center'
                },
                {
                    title: '使用单位联系人',
                    key: 'useOrgPersonCode'
                },
                {
                    title: '使用单位联系电话',
                    key: 'useOrgPersonTel'
                }
            ],
            customsDecUserList: [],
            selectedList: []
        }
    },

    created () {
        this.init(this.usePeopModal.editORshow, this.usePeopModal.CustomsDecUserList)
    },

    methods: {
        init (editORshow, list) {
            this.editORshow = editORshow
            if (list.length > 0) {
                list.forEach(item => {
                    item._disabled = editORshow
                })
            }
            this.customsDecUserList = [...list]
        },

        addUser () {
            this.userForm.useOrgPersonCode = ''
            this.userForm.useOrgPersonTel = ''
        },

        delUser () {
            if (this.selectedList.length === 0) {
                return
            }
            this.selectedList.forEach(item => {
                let index = this.customsDecUserList.indexOf(item)
                this.customsDecUserList.splice(index, 1)
            })
        },

        saveUser () {
            if (!this.userForm.useOrgPersonCode) {
                this.$Message.warning('请输入使用单位联系人')
                return false
            }
            if (!this.userForm.useOrgPersonTel) {
                this.$Message.warning('请输入使用单位联系电话')
                return false
            }
            if (!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.userForm.useOrgPersonTel))) {
                this.$Message.warning('手机号码有误，请重填')
                return false
            }
            let obj = JSON.parse(JSON.stringify(this.userForm))
            this.customsDecUserList.push(obj)
            this.addUser()
        },

        userSelect (val) {
            this.selectedList = val
        },

        closeModel () {
            this.handleInput(false)
        },
        handleInput (v) {
            this.$emit('input', v)
        },

        saveUsePeop () {
            this.$emit('saveUsePeop', this.customsDecUserList)
            this.closeModel()
        }
    }
}
</script>
